Halogen HTML
HTML要素を表す関数群
e.g. HH.button, HH.div
Halogen HTMLは状態などは持てない
2つの引数
attr, props, event handler
children
属性がないときはアンダーバー付きの関数を使えば省略できる
code:以下2つは同じ.purs
ちょっと気をつけるところ
code:purs(hs)
import Halogen.HTML as HH
import Halogen.HTML.Properties as HP
element :: forall w i. HH.HTML w i
element =
HH.div
[ HH.input
, HH.button
, HP.type_ HP.ButtonSubmit
]
]
htmlのclassはHP.classes []
HH.ClassNameというnewtypeを使う
ClassNameはHHにあるのは何でだろう #?? HPにあっても良い気がするんだけどmrsekut.icon
buttonのtypeもnewtypeを使う
何も考えてないとHP.type "submit"と書いちゃうmrsekut.icon
HH.inputはchildrenを取らない1引数関数
第2引数書くとコンパイルエラーになる
型
DOM内のeventに応答しないHTMLの場合に使う
HH.HTML w iと書かずに、より制限の強いPlainHTMLを使う
ただし、fromPlainHTMLで変換しないといけない場合が出てくる
使っているのを見たことがないmrsekut.icon
IProp
HP.系のproperty関数を誤ったHTML要素に指定できないように働く
独自のカスタム要素を作るときのComponentとの関係が少し分かりづらい
状態を持たなければ、HTMLで作るのか?
Componentで作っても同様のことはできる
letとconstの使い分けの明示みたいな感じになるのか?
参考
公式docs